<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据分析报表</el-breadcrumb-item>
      <el-breadcrumb-item>生产进度报表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <div class="sea-box">
        <el-form ref="form" label-width="120px">
          <el-form-item label="工单">
            <el-input v-model="order" placeholder="请选择工单">
              <template #suffix>
                <i
                  class="el-input__icon el-icon-search"
                  @click="orderchoice"
                ></i>
              </template>
            </el-input>
          </el-form-item>
        </el-form>
        <div class="btn">
          <el-button type="success" @click="search">查询</el-button>
          <el-button type="success" @click="empty">清空</el-button>
        </div>
      </div>
      <div v-show="searchTable">
        <div class="title"><div>生产进度报表</div></div>
        <div class="searchTable">
          <div class="qk" id="qk"></div>
          <div class="jd" id="jd"></div>
        </div>
      </div>
    </el-card>
    <!-- 工单列表对话框 -->
    <el-dialog title="工单列表" v-model="orderDV" width="70%" append-to-body>
      <!-- 对话框内容 -->
      <el-table
        stripe
        border
        :data="orderList"
        tooltip-effect="dark"
        style="width: 100%"
        size="small"
      >
        <el-table-column prop="id" label="id" width="50" align="center">
        </el-table-column>
        <el-table-column
          prop="shoporder_no"
          label="工单编号"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shoporder_numbers"
          label="订单数量"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="shoporder_item"
          label="物料编号"
          width="200"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="process_route"
          label="工艺路线"
          width="160"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="status"
          label="工单状态"
          width="100"
          align="center"
        >
          <template #default="scope">
            <span v-if="scope.row.status == 0">已创建</span>
            <span v-else-if="scope.row.status == 1">已下达 </span>
            <span v-else-if="scope.row.status == 2">生产中</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="shoporder_start_date"
          label="订单开始时间"
          width="170"
          align="center"
        >
          <template #default="scope">
            {{ formatDate(scope.row.shoporder_start_date) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="shoporder_end_date"
          label="订单完成时间"
          width="170"
          align="center"
        >
          <template #default="scope">
            {{ formatDate(scope.row.shoporder_end_date) }}
          </template>
        </el-table-column>
        <el-table-column
          prop="site"
          label="挂靠站点"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="by_user"
          label="创建人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="create_time"
          label="创建时间"
          width="170"
          align="center"
        >
          <template #default="scope">
            {{ formatDate(scope.row.create_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center">
          <template #default="scope">
            <el-button size="mini" @click="choiceEdit(scope.row)"
              >选择</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pageNow"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="rowCount"
      >
      </el-pagination>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="orderDV = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      order: "",
      orderList: [],
      orderDV: false,
      searchTable: false,
      pageCount: 1,
      pageNow: 1,
      pageSize: 10,
      rowCount: 0,
    };
  },
  methods: {
    orderchoice() {
      this.orderDV = true;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        },
        method: "post",
        url: "/IE_MES/product_plan/shoporder_maintenance_findByPage.shtml",
        data: this.$qs.stringify({
          pageSize: this.pageSize,
          pageNow: this.pageNow,
        }),
      }).then((res) => {
        this.orderList = res.data.records;
        this.pageCount = res.data.pageCount;
        this.pageNow = res.data.pageNow;
        this.pageSize = res.data.pageSize;
        this.rowCount = res.data.rowCount;
      });
    },
    choiceEdit(row) {
      this.order = row.shoporder_no;
      console.log(this.order);
      this.orderDV = false;
    },
    empty(){
      this.order = ''
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.orderchoice();
    },
    handleCurrentChange(newPage) {
      this.pageNow = newPage;
      this.orderchoice();
    },
    search() {
      this.searchTable = true;
      this.$axios({
        headers: {
          "Content-Type": "application/x-www-form-urlencoded",
        },
        method: "post",
        url: "/IE_MES/report/getReportData.shtml",
        params: { "formMap.reportMethod": "getScheduleReportData",
                  "formMap.scheduler":this.order },
      }).then((res) => {
        console.log(res.data.data);
        this.statisticalList = res.data.data;
        const noList = this.statisticalList.map((item) => {
          return item.name;
        });
        const numList = this.statisticalList.map((item) => {
          return item.rangeDoneNum;
        });
        const ncList = this.statisticalList.map((item) => {
          return item.nc;
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = this.$echarts.init(document.getElementById("qk"));
        // 绘制图表
        myChart.setOption({
          title: {
            text: "当天生产情况",
            left: "center",
            textStyle: {
              fontSize: 20,
            },
          },
          tooltip: { trigger: "item" },
          legend: {
            orient: "vertical",
            left: "left",
          },
          xAxis: {
            data: noList,
            type: "category",
            axisLabel: {
              interval: 0,
            },
          },
          yAxis: {},
          series: [
            {
              name: "当日生产数量",
              type: "line",
              data: numList,
            }
          ],
        });
      });
      this.$axios({
      headers: {
        "Content-Type": "application/x-www-form-urlencoded",
      },
      method: "post",
      url: "/IE_MES/report/getReportData.shtml",
        params: { "formMap.reportMethod": "getScheduleReportData",
                  "formMap.scheduler":this.order },
    }).then((res) => {
      console.log(res.data.data);
      this.inventoryList = res.data.data;
      const eList = this.inventoryList.map((item) => {
        return {
          name: item.all,
          value: item.value,
        };
      });
      // 基于准备好的dom，初始化echarts实例
      var myChart = this.$echarts.init(document.getElementById("jd"));
      // 绘制图表
      myChart.setOption({
        title: {
          text: "生产进度",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "生产进度",
            type: "pie",
            radius: "50%",
            data: eList,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    });
    },
    formatDate(data) {
      var date = new Date(data);
      var YY = date.getFullYear() + "-";
      var MM =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      var hh =
        (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
      var mm =
        (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) +
        ":";
      var ss =
        date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
      return YY + MM + DD + " " + hh + mm + ss;
    },
  },
};
</script>

<style lang="less" scoped>
.sea-box {
  width: 50%;
  height: 100px;
  margin: 0 auto;
  position: relative;
  .btn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}
.title {
  margin: 20px auto;
  font-size: 20px;
  font-weight: 1000;
  display: flex;
  justify-content: space-around;
}
.searchTable {
  display: flex;
  justify-content: space-around;
  margin-top: 30px;
  .qk {
    width: 50%;
    height: 550px;
  }
  .jd {
    width: 50%;
    height: 550px;
  }
}
</style>